<template>
    <view class="container">
      <!-- 门禁日志 -->
      <view class="visitor-records">
        <view class="section-header">
          <text class="section-title">门禁日志</text>
        </view>
        
        <view v-if="visitorRecords.length === 0" class="empty-state">
          <image src="/static/icons/empty-record.png" class="empty-icon"></image>
          <text class="empty-text">暂无门禁日志</text>
        </view>
        
        <view v-else class="record-list">
          <view class="record-item" v-for="(record, index) in visitorRecords" :key="index">
            <view class="record-left">
              <view class="visitor-avatar" :style="{ backgroundColor: getAvatarColor(record.name) }">
                {{ record.name.substring(0, 1) }}
              </view>
              <view class="record-info">
                <view class="record-name-row">
                  <text class="visitor-name">{{ record.name }}</text>
                  <text class="record-type" :class="{ 'type-period': record.type === '时段通行' }">
                    {{ record.type }}
                  </text>
                </view>
                <text class="record-time">{{ record.time }}</text>
                <text class="record-detail" v-if="record.detail">{{ record.detail }}</text>
              </view>
            </view>
            <view class="record-status" :class="{ 
              'status-used': record.status === '已使用', 
              'status-expired': record.status === '已过期',
              'status-abnormal': record.status === '异常' }">
              {{ record.status }}
            </view>
          </view>
        </view>
        
      </view>
      
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        activeTab: 'qrcode',
        qrCodeUrl: '',
        visitorCode: '',
        qrCodeExpireTime: '',
        showShareModal: false,
        periodForm: {
          name: '',
          phone: '',
          reason: '',
          startDate: '',
          endDate: ''
        },
        reasonOptions: ['探亲访友', '快递配送', '家政服务', '装修维修', '其他'],
        activeFilter: 'all',
        visitorRecords: [
          {
            id: 1,
            name: '刘伟',
            type: '一次性通行',
            time: '2025-03-12 14:30',
            status: '已使用',
            detail: '正门入口，停留时间: 2小时'
          },
          {
            id: 2,
            name: '张丽华',
            type: '时段通行',
            time: '2025-03-11 至 2025-03-18',
            status: '使用中',
            detail: '今日进出3次，最近: 西门入口 15:20'
          },
          {
            id: 3,
            name: '王师傅',
            type: '一次性通行',
            time: '2025-03-10 09:15',
            status: '已过期',
            detail: '南门入口，停留时间: 5小时'
          }
        ],
        filteredRecords: []
      }
    },
    created() {
      this.filterRecords();
    },
    methods: {
      getAvatarColor(name) {
        const colors = [
          '#6a11cb', '#2575fc', '#ff9500', '#ff5e3a', 
          '#34c759', '#007aff', '#5856d6', '#af52de'
        ];
        const index = name.charCodeAt(0) % colors.length;
        return colors[index];
      },
      setFilter(filter) {
        this.activeFilter = filter;
        this.filterRecords();
      },
      filterRecords() {
        if (this.activeFilter === 'all') {
          this.filteredRecords = this.visitorRecords;
        } else if (this.activeFilter === 'abnormal') {
          this.filteredRecords = this.visitorRecords.filter(record => record.status === '异常');
        } else if (this.activeFilter === 'today') {
          const today = new Date().toISOString().split('T')[0];
          this.filteredRecords = this.visitorRecords.filter(record => {
            return record.time.includes(today) || 
                   (record.detail && record.detail.includes('今日'));
          });
        }
      }
    },
    computed: {
      displayRecords() {
        return this.filteredRecords.length > 0 ? this.filteredRecords : this.visitorRecords;
      }
    }
  }
  </script>
  
  <style lang="scss">
  .container {
    min-height: 100vh;
    background-color: #f8f9fc;
    padding: 30rpx 30rpx 50rpx;
  }
  
  .access-type-section {
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
    margin-bottom: 30rpx;
    
    .type-tabs {
      display: flex;
      border-bottom: 1rpx solid #f0f0f0;
      
      .tab-item {
        flex: 1;
        height: 90rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30rpx;
        color: #666;
        position: relative;
        
        &.active {
          color: #6a11cb;
          font-weight: 500;
          
          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60rpx;
            height: 6rpx;
            background: linear-gradient(to right, #6a11cb, #2575fc);
            border-radius: 3rpx;
          }
        }
      }
    }
    
    .tab-content {
      padding: 30rpx;
    }
    
    .qrcode-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 30rpx;
      
      .qrcode-wrapper {
        width: 400rpx;
        height: 400rpx;
        background-color: #fff;
        border-radius: 12rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 30rpx;
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
        overflow: hidden;
        
        .qrcode-image {
          width: 100%;
          height: 100%;
        }
        
        .qrcode-placeholder {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #f5f7fa;
          
          .placeholder-text {
            font-size: 28rpx;
            color: #999;
          }
        }
      }
      
      .qrcode-info {
        width: 100%;
        
        .info-item {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 16rpx;
          
          .info-label {
            font-size: 28rpx;
            color: #666;
            margin-right: 20rpx;
          }
          
          .info-value {
            font-size: 28rpx;
            color: #333;
            font-weight: 500;
            
            &.code {
              font-size: 36rpx;
              color: #6a11cb;
              letter-spacing: 2rpx;
            }
          }
        }
      }
    }
    
    .action-buttons {
      display: flex;
      justify-content: center;
      margin-bottom: 30rpx;
      
      .action-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80rpx;
        border-radius: 40rpx;
        font-size: 28rpx;
        padding: 0 40rpx;
        margin: 0 15rpx;
        
        .iconfont {
          margin-right: 10rpx;
          font-size: 32rpx;
        }
        
        &.generate {
          background: linear-gradient(to right, #6a11cb, #2575fc);
          color: #fff;
          box-shadow: 0 4rpx 10rpx rgba(106, 17, 203, 0.2);
        }
        
        &.share {
          background-color: #f5f7fa;
          color: #6a11cb;
          border: 1rpx solid #e0e0e0;
        }
      }
    }
    
    .tips-section {
      background-color: #f8f9fc;
      border-radius: 12rpx;
      padding: 20rpx;
      
      .tips-title {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;
        
        .iconfont {
          color: #6a11cb;
          font-size: 28rpx;
          margin-right: 10rpx;
        }
        
        text {
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
        }
      }
      
      .tips-content {
        .tip-item {
          font-size: 24rpx;
          color: #666;
          line-height: 1.6;
          display: block;
        }
      }
    }
    
    .form-section {
      .form-item {
        margin-bottom: 30rpx;
        
        .form-label {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 16rpx;
          display: block;
        }
        
        .form-input {
          width: 100%;
          height: 80rpx;
          background-color: #f5f7fa;
          border-radius: 12rpx;
          padding: 0 20rpx;
          font-size: 28rpx;
          color: #333;
        }
        
        .form-picker {
          width: 100%;
          height: 80rpx;
          background-color: #f5f7fa;
          border-radius: 12rpx;
          padding: 0 20rpx;
          display: flex;
          align-items: center;
          
          .picker-value {
            font-size: 28rpx;
            color: #333;
          }
        }
        
        &.date-range {
          .date-picker-group {
            display: flex;
            align-items: center;
            
            .date-picker {
              flex: 1;
              height: 80rpx;
              background-color: #f5f7fa;
              border-radius: 12rpx;
              padding: 0 20rpx;
              display: flex;
              align-items: center;
              
              .picker-value {
                font-size: 28rpx;
                color: #333;
              }
            }
            
            .date-separator {
              margin: 0 20rpx;
              color: #999;
              font-size: 28rpx;
            }
          }
        }
      }
    }
  }
  
  .visitor-records {
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
    margin-bottom: 30rpx;
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1rpx solid #f0f0f0;
      
      .section-title {
        font-size: 32rpx;
        font-weight: bold;
        position: relative;
        padding-left: 20rpx;
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 6rpx;
          height: 30rpx;
          background: linear-gradient(to bottom, #6a11cb, #2575fc);
          border-radius: 3rpx;
        }
      }
      
      .more-link {
        font-size: 26rpx;
        color: #6a11cb;
      }
    }
    
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 80rpx 0;
      
      .empty-icon {
        width: 180rpx;
        height: 180rpx;
        margin-bottom: 30rpx;
        opacity: 0.7;
      }
      
      .empty-text {
        font-size: 28rpx;
        color: #999;
      }
    }
    
    .record-list {
      padding: 10rpx 30rpx;
      
      .record-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24rpx 0;
        border-bottom: 1rpx solid #f0f0f0;
        transition: background-color 0.3s;
        
        &:active {
          background-color: #f9f9f9;
        }
        
        &:last-child {
          border-bottom: none;
        }
        
        .record-left {
          display: flex;
          align-items: center;
          flex: 1;
          
          .visitor-avatar {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 32rpx;
            font-weight: 500;
            margin-right: 20rpx;
            box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
          }
          
          .record-info {
            flex: 1;
            
            .record-name-row {
              display: flex;
              align-items: center;
              margin-bottom: 8rpx;
              
              .visitor-name {
                font-size: 30rpx;
                color: #333;
                font-weight: 500;
                margin-right: 16rpx;
              }
              
              .record-type {
                font-size: 22rpx;
                color: #fff;
                background-color: #ff9500;
                padding: 4rpx 12rpx;
                border-radius: 12rpx;
                
                &.type-period {
                  background-color: #007aff;
                }
              }
            }
            
            .record-time {
              font-size: 24rpx;
              color: #999;
              margin-bottom: 8rpx;
            }
            
            .record-detail {
              font-size: 22rpx;
              color: #666;
              max-width: 450rpx;
              line-height: 1.4;
            }
          }
        }
        
        .record-status {
          font-size: 26rpx;
          padding: 6rpx 16rpx;
          border-radius: 20rpx;
          background-color: rgba(52, 199, 89, 0.1);
          color: #34c759;
          
          &.status-used {
            background-color: rgba(153, 153, 153, 0.1);
            color: #999;
          }
          
          &.status-expired {
            background-color: rgba(255, 59, 48, 0.1);
            color: #ff3b30;
          }
          
          &.status-abnormal {
            background-color: rgba(255, 59, 48, 0.15);
            color: #ff3b30;
            font-weight: bold;
          }
        }
      }
    }
    
    .filter-section {
      padding: 24rpx 30rpx;
      border-top: 1rpx solid #f0f0f0;
      background-color: #fafafa;
      
      .filter-header {
        font-size: 26rpx;
        color: #666;
        margin-bottom: 18rpx;
      }
      
      .filter-options {
        display: flex;
        flex-wrap: wrap;
        
        .filter-item {
          padding: 10rpx 24rpx;
          background-color: #f5f7fa;
          border-radius: 30rpx;
          font-size: 24rpx;
          color: #666;
          margin-right: 15rpx;
          margin-bottom: 10rpx;
          transition: all 0.3s;
          
          &.active {
            background: linear-gradient(to right, #6a11cb, #2575fc);
            color: #fff;
            box-shadow: 0 2rpx 8rpx rgba(106, 17, 203, 0.2);
          }
          
          &:active {
            opacity: 0.8;
          }
        }
      }
    }
  }
  </style> 